<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家列表</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="wrap" id="app">
        <div class="container">
            <!-- 头部 start -->
            <header class="header_bar">
                <a href="../index.html">
                    <div class="header_bar_back"></div>
                </a>
                <div class="header_bar_title">附近商家</div>
            </header>
            <!-- 头部 end -->
            <!-- 附近商家列表 start -->
            <div class="shop" style="margin-top: 1.3rem;">

                <div class="shop_list">
                    <ul>
                        <li v-for="(shop,index) in shops" :key="index">
                            <a href="shop.html">
                                <div class="shop_info">
                                    <img :src="shop.imgUrl" class="shop_img">
                                    <div class="shop_main">
                                        <div class="main_top">
                                            <h3>{{shop.name}}</h3>
                                        </div>
                                        <div class="main_more">
                                            <div class="main_desc">
                                                <img src="../images/shop/star.png" alt="">
                                                <span class="sale">月销{{shop.sales}}+</span>
                                            </div>
                                            <div class="money_limit">
                                                <span>￥{{shop.expressLimit}}起送</span>
                                                <span>配送费￥{{shop.expressPrice}}</span>
                                            </div>
                                            <div class="main_time">
                                                <span>{{shop.distance}}</span>
                                            </div>
                                            <div class="main_price">
                                                <span class="act_icon">特</span>
                                                <span class="act_desc">{{shop.slogan}}</span>
                                            </div>
                                            <div class="main_price">
                                                <span class="act_icon">减</span>
                                                <span class="act_desc">{{shop.promotion}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 附近商家 end -->
        </div>
    </div>
<script>
    const { createApp,ref } = Vue
    createApp({
        setup(){
            const shops = ref([])
            axios.get('http://localhost:3000/shops')
                .then(function (response) {
                    shops.value = response.data
                })
            .catch(function (error) {
                console.log(error)
            })

            return{
                 shops
            }
        }
    }).mount("#app")
</script>
</body>

</html>